import React, { Component } from "react";
import {Breadcrumb, Tabs, Table, Button, Radio, Select, Col, Input,Modal} from 'antd';
import '../Ddgl/Ddgl.css';
import axios from 'axios'
const { Option } = Select;
const {TabPane}=Tabs;
const { TextArea } = Input;
class Ddgl extends Component{
    constructor(props) {
        super(props);
        this.list= React.createRef();
        this.lister= React.createRef();
        this.myList= React.createRef();
        this.skList= React.createRef();
        this.state={
            Arr1:[],
            text1:'',
            text2:'',
            text3:'',
            selectValue:'订单号',
            visible: false,
            data:[],
            value:'现金支付',
            xiangQing:[
                // {id:'1',
                //  oderUser:'张国荣',
                //  oderMoney:'1000元',
                //     liuShuiHao:'111',
                //  isState:'已完成',
                //     payFor:'POSS机',
                //  oderTime: '2020-10:00',
                //     payForTime:'2020-03:30',
                //     zhangHao:'20161111',
                //     tell:'13028180204',
                //     nameTrue:'张国荣',
                //      IdCard:'51372111',
                //  haoMa:'1111'}
            ]
        }
        this.columns1=[{
            title: '订单号',
            align:'center',
            dataIndex: 'key',
            key:'key'
        }, {
            title: '商品',
            dataIndex: 'shop',
            align:'center',
            key:'shop'
        }, {
            title: '下单用户',
            align:'center',
            key:'oderUser',
            dataIndex: 'oderUser',
        }, {
            title: '订单金额',
            align:'center',
            key:'oderMoney',
            dataIndex: 'oderMoney',
        }, {
            title: '下单时间',
            align:'center',
            dataIndex: 'oderTime',
            key:'oderTime'
        }, {
            title: '支付方式',
            align:'center',
            dataIndex: 'payFor',
            key:'payFor'
        },{
            width:"300px",
            title: '操作',
            dataIndex: '',
            key: 'x',
            align:'center',
            render: () =>(<div>
                <Button type='primary' onClick={()=>this.xianshi()}>查看</Button>,
                <Button type='danger' onClick={()=>this.showModal()}>退款</Button>
            </div>)}
        ];
        this.columns2=[{
            title: '订单号',
            align:'center',
            dataIndex: 'key',
            key:'key'
        }, {
            title: '商品',
            dataIndex: 'shop',
            align:'center',
            key:'shop'
        }, {
            title: '下单用户',
            align:'center',
            key:'oderUser',
            dataIndex: 'oderUser',
        }, {
            title: '订单金额',
            align:'center',
            key:'oderMoney',
            dataIndex: 'oderMoney',
        }, {
            title: '下单时间',
            align:'center',
            dataIndex: 'oderTime',
            key:'oderTime'
        }, {
            title: '支付方式',
            align:'center',
            dataIndex: 'payFor',
            key:'payFor'
        },{
            width:"300px",
            title: '操作',
            dataIndex: '',
            key: 'x',
            align:'center',
            render: (obj) =>(<div>
                <Button type='primary' onClick={()=>this.xianshi(obj)}>查看</Button>,
            </div>)}
        ];
        this.columns=[{
            title: '订单号',
            align:'center',
            dataIndex: 'key',
            key:'key'
        }, {
            title: '商品',
            dataIndex: 'shop',
            align:'center',
            key:'shop'
        }, {
            title: '下单用户',
            align:'center',
            key:'oderUser',
            dataIndex: 'oderUser',
        }, {
            title: '订单金额',
            align:'center',
            key:'oderMoney',
            dataIndex: 'oderMoney',
        }, {
            title: '下单时间',
            align:'center',
            dataIndex: 'oderTime',
            key:'oderTime'
        }, {
            title: '支付方式',
            align:'center',
            dataIndex: 'payFor',
            key:'payFor'
        }, {
            width:"300px",
            title: '操作',
            dataIndex: '',
            key: 'x',
            align:'center',
            render: () =>(<div>
                <Button type='primary' onClick={()=>this.xianshi()}>查看</Button>,
                <Button style={{backgroundColor:'pink'}} onClick={()=>this.quXiao()}>取消</Button>,
                <Button type='danger' onClick={()=>this.shoukuan()}>收款</Button>
            </div>)}
        ];
    }
    render(){
        let {data}=this.state;
        let {xiangQing}=this.state;
        let {Arr1}=this.state;
        function callback(key) {
            console.log(key);
        }
        return(
           <div>
               <div>
                   <div className='shurukuang' ref={this.lister}>
                       <div className='duoxuan'>
                           <Select style={{width:"100px"}} value={this.state.selectValue} onChange={this.selectChange}>
                               <Option value="订单号">订单号</Option>
                           </Select>
                       </div>
                       <Col span="3">
                           <Input placeholder='请输入数字' onChange={this.inputChange1} value={this.state.text1}></Input>
                       </Col>
                       <div className="wenzi">申请时间：</div>
                       <Col span="3">
                           <Input onChange={this.inputChange3} value={this.state.text3}></Input>
                       </Col>
                       {/*<div className="wenzi1">-</div>*/}
                       {/*<Col span="3">*/}
                       {/*    <Input></Input>*/}
                       {/*</Col>*/}
                       <div className="wenzi">买家手机号：</div>
                       <Col span="3">
                           <Input placeholder='请输入手机号' onChange={this.inputChange2} value={this.state.text2}></Input>
                       </Col>
                       <div>
                           <Button onClick={this.Search}>搜索</Button>
                           <Button onClick={()=>this.chongZhi()}>重置</Button>
                       </div>
                   </div>
                   <div ref={this.list} style={{display:'block'}}>
                       <Breadcrumb>
                           <Breadcrumb.Item>交易</Breadcrumb.Item>
                           <Breadcrumb.Item>
                               订单管理
                           </Breadcrumb.Item>
                       </Breadcrumb>
                       <div className='hengXian'></div>
                       <Tabs defaultActiveKey="1" onChange={callback}>
                           <TabPane tab="待付款" key="1" >
                               <Table dataSource={data} columns={this.columns} bordered={true} onRow={(record)=>{
                                   return {
                                       onClick:()=>{
                                           let arr1=[]
                                           arr1.push(record)
                                           // this.state.Arr1=arr1.push(record)
                                           this.setState({
                                               xiangQing:arr1,
                                               Arr1:arr1
                                           })
                                           console.log(arr1)
                                       }
                                   }
                               }} pagination={{
                                   position:['bottomCenter'],
                                   defaultPageSize:5
                               }}/>
                           </TabPane>
                           <TabPane tab="已付款" key="2">
                               <Table dataSource={xiangQing} columns={this.columns1} bordered={true} pagination={{
                                   position:['bottomCenter'],
                                   defaultPageSize:5
                               }}/>

                           </TabPane>
                           <TabPane tab="已取消" key="3">
                               <Table dataSource={Arr1} columns={this.columns2} bordered={true} pagination={{
                                   position:['bottomCenter'],
                                   defaultPageSize:5
                               }}/>
                           </TabPane>
                       </Tabs>
                   </div>
                   <div className='myList' ref={this.myList} style={{display:'none'}}>
                       <Breadcrumb>
                           <Breadcrumb.Item>交易</Breadcrumb.Item>
                           <Breadcrumb.Item>
                               订单详情
                           </Breadcrumb.Item>
                       </Breadcrumb>
                       <div className='hengXian'></div>
                       <Tabs defaultActiveKey="1">
                           <TabPane tab="订单详情" key="1" >
                               <div className='title'>订单信息</div>
                               {xiangQing.map((item,i) =>
                                   <div key={i}>
                                       <div className='dingdanxinxi'>
                                           <div>
                                               <ul>
                                                   <li>下单用户:</li>
                                                   <li>订单状态:</li>
                                                   <li>下单时间:</li>
                                                   <li>流_水_号:</li>
                                               </ul>
                                               <ul>
                                                   <li>{item.oderUser}</li>
                                                   <li>{item.isState}</li>
                                                   <li>{item.oderTime}</li>
                                                   <li>{item.liuShuiHao}</li>
                                               </ul>
                                           </div>
                                           <div>
                                               <ul>
                                                   <li>订_单_号:</li>
                                                   <li>订单总额:</li>
                                                   <li>付款方式:</li>
                                                   <li>付款时间:</li>
                                               </ul>
                                               <ul>
                                                   <li>{item.key}</li>
                                                   <li>{item.oderMoney}</li>
                                                   <li>{item.payFor}</li>
                                                   <li>{item.payForTime}</li>
                                               </ul>
                                           </div>
                                       </div>
                                   </div>
                               )}
                               <div className='title'>买家信息</div>
                               {xiangQing.map((item,i) =>
                                   <div key={i}>
                                       <div className='maijiaxinxi'>
                                           <div>
                                               <ul>
                                                   <li>用户账号:</li>
                                                   <li>联系电话:</li>
                                               </ul>
                                               <ul>
                                                   <li>{item.zhangHao}</li>
                                                   <li>{item.tell}</li>
                                               </ul>
                                           </div>
                                           <div>
                                               <ul>
                                                   <li>真实姓名:</li>
                                                   <li>证件号码:</li>
                                               </ul>
                                               <ul>
                                                   <li>{item.nameTrue}</li>
                                                   <li>{item.IdCard}</li>
                                               </ul>
                                           </div>
                                       </div>
                                   </div>
                               )}
                           </TabPane>
                       </Tabs>
                       <div style={{textAlign:'center',margin:'15px auto'}} onClick={()=>this.fanhui()}><Button>返回</Button></div>
                   </div>
                   <div className='myList1' ref={this.skList} style={{display:'none'}}>
                       <Breadcrumb>
                           <Breadcrumb.Item>交易</Breadcrumb.Item>
                           <Breadcrumb.Item>
                               收款
                           </Breadcrumb.Item>
                       </Breadcrumb>
                       <div className='hengXian'></div>
                       <Tabs defaultActiveKey="1">
                           <TabPane tab="收款" key="1" >
                               <div className='title'>订单信息</div>
                                   {xiangQing.map((item,i) =>
                                       <div key={i}>
                                           <div className='maijiaxinxi'>
                                               <div>
                                                   <ul>
                                                       <li>订_单_号:</li>
                                                       <li>下单时间:</li>
                                                   </ul>
                                                   <ul>
                                                       <li>{item.key}</li>
                                                       <li>{item.oderTime}</li>
                                                   </ul>
                                               </div>
                                               <div>
                                                   <ul>
                                                       <li>订单状态:</li>
                                                       <li>订单总额:</li>
                                                   </ul>
                                                   <ul>
                                                       <li>{item.isState}</li>
                                                       <li>{item.oderMoney}</li>
                                                   </ul>
                                               </div>
                                           </div>
                                       </div>
                                   )}
                               <div className='title'>买家信息</div>
                               {xiangQing.map((item,i) =>
                                   <div key={i}>
                                       <div className='maijiaxinxi'>
                                           <div>
                                               <ul>
                                                   <li>用户账号:</li>
                                                   <li>联系电话:</li>
                                               </ul>
                                               <ul>
                                                   <li>{item.zhangHao}</li>
                                                   <li>{item.tell}</li>
                                               </ul>
                                           </div>
                                           <div>
                                               <ul>
                                                   <li>真实姓名:</li>
                                                   <li>证件号码:</li>
                                               </ul>
                                               <ul>
                                                   <li>{item.nameTrue}</li>
                                                   <li>{item.IdCard}</li>
                                               </ul>
                                           </div>
                                       </div>
                                   </div>
                               )}
                               <div className='title'>收款信息</div>
                               <div className='zhifuxinxi'>
                                   <div>
                                       <Radio.Group onChange={this.onChange} value={this.state.value} defaultValue={this.state.value}>
                                           <div>支付方式:</div>
                                           <div style={{marginTop:'40px',marginLeft:'120px',marginRight:'120px'}}><Radio value={"现金支付"}>现金支付</Radio></div>
                                           <div style={{marginTop:'40px'}}><Radio value={"POSS刷卡"}>POSS刷卡</Radio></div>
                                       </Radio.Group>
                                   </div>
                               </div>
                           </TabPane>
                       </Tabs>
                       <div style={{textAlign:'center',margin:'15px auto'}}>
                           <Button style={{backgroundColor:'blue'}} onClick={()=>this.baoCun()}>保存</Button>
                           <Button onClick={()=>this.fanhui()}>返回</Button>
                       </div>
                   </div>
                   <div>
                       <Modal
                           title="退款"
                           visible={this.state.visible}
                           onOk={this.queRen}
                           onCancel={this.hideModal}
                           okText="提交"
                           cancelText="取消"
                       >
                           <div className='Model'>
                               <h4>商品名称</h4>
                               <div className='Image'>
                               </div>
                           </div>
                           <div className='hengxian'></div>
                           <div className='TextTitle'>
                               <h4>退款理由：</h4>
                               <TextArea rows={4} />
                           </div>
                       </Modal>
                   </div>
               </div>
           </div>
        )
    }
    componentDidMount() {
        axios({
            url:'http://123.57.67.148:3000/mock/51/oderData',
            method:'post'
        }).then(res=>{
            let data=res.data.data.filter(item=>{
                item.key=item.id;
                delete item.id;
                return item
            });
            this.setState({
                data:data
            })
        })
    }
    chongZhi(){
        axios({
            url:'http://123.57.67.148:3000/mock/51/oderData',
            method:'post'
        }).then(res=>{
            let data=res.data.data.filter(item=>{
                item.key=item.id;
                delete item.id;
                return item
            });
            this.setState({
                data:data
            })
        })
    }
    selectChange=(e)=>{
        this.setState({
            selectValue:e
        })
    }
    xianshi(){
        this.list.current.focus();
        let list=this.list.current;
        list.style.display='none'
        this.lister.current.focus();
        let lister=this.lister.current;
        lister.style.display='none'
        this.myList.current.focus();
        let myList=this.myList.current;
        myList.style.display='block'
        axios({
            url:'http://123.57.67.148:3000/mock/51/oderData',
            method:'post',
        }).then(res=>{
            console.log(res)
        })
    }
    shoukuan(){
        this.list.current.focus();
        let list=this.list.current;
        list.style.display='none';
        this.skList.current.focus();
        let skList=this.skList.current;
        skList.style.display='block';
    }
    fanhui=()=>{
        this.list.current.focus();
        let list=this.list.current;
        list.style.display='block';
        this.lister.current.focus();
        let lister=this.lister.current;
        lister.style.display='flex';
        this.myList.current.focus();
        let myList=this.myList.current;
        myList.style.display='none';
        this.skList.current.focus();
        let skList=this.skList.current;
        skList.style.display='none'
    }
    onChange = e => {
        this.setState({
            value: e.target.value,
        });
    };
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    hideModal = () => {
        this.setState({
            visible: false,
        });
    };
    queRen = () => {
        this.setState({
            visible: false,
        });
       console.log(111111)
    };
    inputChange1=(e)=>{
        console.log(e.target.value);
        this.setState({
            text1: e.target.value
        })
    };
    inputChange2=(e)=>{
        this.setState({
            text2: e.target.value
        })
    };
    inputChange3=(e)=>{
        this.setState({
            text3: e.target.value
        })
    };
    Search=()=>{
        let text1=this.state.text1;
        let text2=this.state.text2;
        let text3=this.state.text3;
        let arr1=this.state.data;
        let Arr=[];
       for(let i=0;i<arr1.length;i++){
           if(text1===arr1[i].key||text2===arr1[i].key||text3===arr1[i].oderTime){
               Arr.push(arr1[i]);
               // arr1=[];
               this.setState({
                   data:Arr
               })
           }
       }
    }
    baoCun(){
       let RidosText=this.state.value;
        let Arr=this.state.xiangQing;
        let xqArr=Arr.filter((item,i)=>
                item.payFor=RidosText
        )
        console.log(xqArr)
        this.setState({
            xiangQing:xqArr
        })
    }
    quXiao(){
        let Arr1=this.state.Arr1;
        this.setState({
            Arr1:Arr1
        })
    }
}
export default Ddgl;